<template>
  <div v-loading="loading">
    <TableSearch
      ref="tableSearch"
      :tableBtns="tableBtns"
      :search-path="searchPath"
      :formItemsInline="formItemsInline"
      :columns="columns"
      :tableData="tableData"
      :form="form"
      @handleTableData="handleTableData"
      @reset="reset"
    >
    </TableSearch>
  </div>
</template>
<script>
import TableSearch from '@/components/TableSearch'
import formatter, { typeMap } from '@/utils/format'
import { merchantList, exportMerchants, removeMerchant } from '@/api/user'
import Big from 'big.js'
export default {
  name: 'UserList',
  components: { TableSearch },
  data() {
    return {
      form: {},
      visible: false,
      loading: false,
      tableData: {},
      columns: [
        {
          label: '运营商名称',
          prop: 'userName',
          resourceId: '/web/user-management/merchant-management/商户名',
        },
        {
          label: '手机号',
          prop: 'mobile',
          resourceId: '/web/user-management/merchant-management/手机号',
        },
        {
          label: '商户类型',
          prop: 'type',
          formatter: (item) => {
            return typeMap.userType[item.type] || ''
          },
          resourceId: '/web/user-management/merchant-management/商户类型',
        },
        {
          label: '平台分账比例',
          prop: 'splitValue',
          formatter: (item) => {
            if (item.splitValue === null) return '--'
            return `${Big(item.splitValue)}%`
          },
          resourceId: '/web/user-management/merchant-management/分账比例',
        },
        {
          label: '管理员名称',
          prop: 'name',
          resourceId: '/web/user-management/merchant-management/分账比例',
        },
        {
          label: '操作',
          buttons: [
            {
              label: '查看详情',
              class: 'table-button-green',
              size: 'small',
              resourceId: '/web/user-management/merchant-management/查看详情',
              click: (item) => {
                this.handleOpenDesc(item)
              },
            },
            {
              label: '编辑',
              class: 'table-button-green',
              size: 'small',
              resourceId: '/web/user-management/merchant-management/查看详情',
              click: (item) => {
                this.handleOpenEdit(item)
              },
            },
            {
              label: '删除',
              class: 'table-button-green',
              size: 'small',
              resourceId: '/web/user-management/merchant-management/查看详情',
              click: (item) => {
                this.handleDelete(item)
              },
            },
          ],
          resourceId: '/web/user-management/merchant-management/操作',
        },
      ],
      tableBtns: [
        {
          label: '导出',
          isExport: true,
          startDownload: (callback) => {
            exportMerchants({
              ...this.form,
              pageSize: 10,
              currentPage: 1,
            })
              .then((res) => {
                callback(res)
              })
              .catch((err) => {
                console.log(err)
              })
          },
          resourceId: '/web/user-management/merchant-management/导出',
        },
        {
          label: '新增',
          click: this.handleAddMerChant,
          icon: 'el-icon-plus',
          resourceId: '/web/user-management/merchant-management/新增',
        },
        {
          label: '商户申请',
          click: this.handleApplyMerchant,
          icon: 'el-icon-plus',
          resourceId: '/web/user-management/merchant-management/商户申请',
        },
      ],
      searchPath: '/web/user-management/merchant-management/查询',
      formItemsInline: [
        {
          placeholder: '请输入商户名',
          type: 'text',
          clearable: true,
          value: 'userName',
          resourceId: '/web/user-management/merchant-management/商户名',
        },
        {
          placeholder: '请输入手机号',
          type: 'text',
          clearable: true,
          value: 'mobile',
          resourceId: '/web/user-management/merchant-management/手机号',
        },
      ],
    }
  },
  methods: {
    handleTableData(params) {
      this.loading = true
      merchantList(params)
        .then((res) => {
          this.tableData = {
            list: res.list,
            totalCount: res.totalAmount,
          }
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          this.loading = false
        })
    },
    reset() {
      this.form = {}
    },
    handleOpenDesc(item) {
      this.$router.push({
        path: `/user/detail/${item.id}`,
      })
    },
    handleOpenEdit(item) {
      this.$router.push({
        path: `/user/edit/${item.id}`,
      })
    },
    handleDelete(item) {
      removeMerchant({
        id: parseInt(item.id),
      }).then(() => {
        this.$message({
          type: 'success',
          showClose: true,
          message: '删除成功',
        })
        this.$refs.tableSearch.refreshTable()
      })
    },
    handleExport() {},
    handleAddMerChant() {
      this.$router.push('/user/add')
    },
    handleApplyMerchant() {
      this.$router.push('/user/add')
    },
  },
}
</script>
<style lang="scss">
.user-search-container {
  margin-bottom: 30px;
}
</style>
